<template>
    <span @click='open'><slot></slot></span>
    <el-dialog append-to-body destroy-on-close v-model='dialogVisible' @closed='closeDialog' :title='props.title' :width='width'>
        <slot name='content'></slot>
        <template #footer>
            <el-button size='mini' @click='dialogVisible=false'>{{props.cancelText}}</el-button>
            <XRequestButton class='m-l-20' :click='confirm'>
                <el-button size='mini' type='primary'>{{props.confirmText}}</el-button>
            </XRequestButton>
        </template>
    </el-dialog>

</template>

<script lang='ts' setup>
    import { nextTick, ref } from "vue";

    const props = withDefaults(defineProps<{
        title : string,
        width : string|number,
        cancelText : string,
        confirmText : string,
        confirm : Function
    }>(), {
        cancelText : '取 消',
        confirmText : '确 定'
    })

    const emit = defineEmits<{
        (e : 'open'): void,
        (e : 'close'): void
    }>()

    const dialogVisible = ref(false)

    function open() {
        dialogVisible.value = true
        nextTick(() => {
            emit('open')
        })
    }

    async function confirm() {
        await props.confirm()
    }

    function close() {
        dialogVisible.value = false
    }

    function closeDialog() {
        emit('close')
    }


    defineExpose({
        open,
        close
    })

</script>
